 <!-- 信息页 -->
<template>
  <div class="admin-List">
    <!-- 头部 -->
    <div class="header">
      <h3 class="title">企业用户信息管理</h3>
      <el-dropdown trigger="click" v-if="userinfo">
        <span class="el-dropdown-link">
          当前用户：{{ username }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-button
            class="exit"
            :plain="true"
            style="border: none"
            @click="exit()"
            >退出</el-button
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="content">
      <!-- 左边菜单 -->
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#5dd5c8"
      >
        <el-menu-item index="1" @click="tabchange(1)">
          <i class="el-icon-office-building"></i>
          <span slot="title">企业信息 ></span>
        </el-menu-item>
        <el-menu-item index="2" @click="tabchange(2)">
          <i class="el-icon-user"></i>
          <span slot="title">用户信息 ></span>
        </el-menu-item>
      </el-menu>
      <!-- 企业列表 -->
      <div class="content-right" v-if="this.tabIndex == 1">
        <div class="searchBtn" style="display: flex">
          <el-input v-model="search" size="big" placeholder="输入企业名称" />
          <el-button
            size="small"
            icon="el-icon-search"
            style="height: 40px"
            @click="getcompanylist()"
          ></el-button>
        </div>
        <el-table :data="companyList" style="width: 100%" stripe>
          <el-table-column label="创建日期" prop="createTime"></el-table-column>
          <el-table-column
            label="企业名称"
            prop="companyName"
          ></el-table-column>
          <el-table-column
            label="企业邮箱"
            prop="companyEmail"
          ></el-table-column>
          <el-table-column label="企业类型" prop="type"></el-table-column>
          <el-table-column align="right">
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="deleteCompany(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="getcompanylist"
          :current-page.sync="companyCurrentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="companyTotal"
        ></el-pagination>
      </div>
      <!-- 用户列表 -->
      <div class="content-right" v-if="this.tabIndex == 2">
        <div class="searchBtn" style="display: flex">
          <el-input v-model="search2" size="big" placeholder="输入用户名" />
          <el-button
            size="small"
            icon="el-icon-search"
            style="height: 40px"
            @click="getuserlist()"
          ></el-button>
        </div>
        <el-table :data="userList" style="width: 100%" stripe>
          <el-table-column label="创建日期" prop="createTime"></el-table-column>
          <el-table-column label="用户名" prop="userName"></el-table-column>
          <el-table-column label="性别" prop="sex"></el-table-column>
          <el-table-column label="用户邮箱" prop="email"></el-table-column>
          <el-table-column align="right">
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="deleteUser(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="getuserlist"
          :current-page.sync="userCurrentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="userTotal"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
//引入接口定义js文件
import amdinModel from "../request/admin";
import cookie from "js-cookie";
export default {
  //定义变量和初始值
  data() {
    return {
      id: "",
      userinfo: null, //用户信息
      username: "", //用户名
      tabIndex: 1, //菜单下表
      companyTotal: null, //企业总数
      userTotal: null, //用户总数
      companyList: [], //企业列表
      userList: [], //用户列表
      userCurrentPage: 1, //第几页
      companyCurrentPage: 1,
      pageSize: 5, //每页多少条
      search: "", //搜索框输入值
      search2: "",
    };
  },

  methods: {
    // 退出登录
    exit() {
      window.localStorage.removeItem("userinfo");
      amdinModel.adminLoginOut({});
      cookie.remove("satoken");
      this.$router.push({ path: "/" });
      this.$message.success("注销成功");
    },

    // 菜单切换
    tabchange(index) {
      this.tabIndex = index;
    },

    //删除企业
    deleteCompany(row) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          amdinModel.deletecompanylist(row.id).then((res) => {
            if (res.data.code == 200) {
              this.$message.success("删除成功");
              //删除成功 回调列表接口
              this.getcompanylist();
            }
          });
        })
        .catch(() => {});
    },

    //删除用户
    deleteUser(row) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          amdinModel.deleteuserlist(row.id).then((res) => {
            if (res.data.code == 200) {
              this.$message.success("删除成功");
              //删除成功 回调列表接口
              this.getcompanylist();
            }
          });
        })
        .catch(() => {});
    },

    // 请求企业列表
    getcompanylist(page = 1) {
      this.pageNo = page;
      amdinModel
        .getcompanylist({
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          companyName: this.search,
        })
        .then((res) => {
          if (res.data.code === 200) {
            const result = res.data.result;
            this.companyTotal = result.total;
            this.companyList = result.records;
            console.log(result);
          }
        });
    },

    // 请求用户列表
    getuserlist(page = 1) {
      this.pageNo = page;
      amdinModel
        .getuserlist({
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          userName: this.search2,
        })
        .then((res) => {
          if (res.data.code === 200) {
            const result = res.data.result;
            this.userTotal = result.total;
            this.userList = result.records;
            console.log(result);
          }
        });
    },
  },

  //生命周期（页面加载时执行）
  created() {
    // 取出用户信息
    this.userinfo = JSON.parse(window.localStorage.getItem("userinfo"));
    if (
      this.userinfo == null ||
      this.userinfo == "" ||
      this.userinfo.type != "admin"
    ) {
      this.$router.push({ path: "/" });
    } else {
      this.username = this.userinfo.name;
    }
    console.log(this.userinfo);

    this.getcompanylist();
    this.getuserlist();
  },
};
</script>

<style lang="scss" scoped >
@import "../css/List.scss";
</style>